import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import UiRouter from './views/UiRouter'
import Contacts from './views/Contacts'
import About from './views/About'
import AllContacts from './components/AllContacts'
import Alice from './components/Alice'
import Bob from './components/Bob'
import AllContactsChild from './components/AllContactsChild'
import AliceChild from './components/AliceChild'
import BobChild from './components/BobChild'
Vue.use(VueRouter)

const routes = [
  // 一级路由
  {
    path: '/',
    redirect: '/uirouter'
  },
  {
    path: '/uirouter',
    component: UiRouter
  },
  {
    path: '/contacts',
    component: Contacts,
    redirect: '/contacts/allcontacts',
    // 二级路由
    children: [
      {
        path: 'allcontacts',
        component: AllContacts,
        redirect: '/contacts/allcontacts/allcontactschild',
        // 三级路由
        children: [
          {
            path: 'allcontactschild',
            component: AllContactsChild
          }
        ]
      },
      {
        path: 'alice',
        component: Alice,
        redirect: '/contacts/alice/alicechild',
        children: [
          {
            path: 'alicechild',
            component: AliceChild
          }
        ]
      },
      {
        path: 'bob',
        component: Bob,
        redirect: '/contacts/bob/bobchild',
        children: [
          {
            path: 'bobchild',
            component: BobChild
          }
        ]
      }
    ]
  },
  {
    path: '/about',
    component: About
  }
]

const router = new VueRouter({
  routes
})

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
